<template>
  <div class="category_tree_wrap">
    <div v-show="isShowSearch">
      <div class="category_search">
        <BasicForm
          :isScalingBtn="false"
          :formColumns="formItemList"
          :dataSource="formData"
          :handleSearchForm="handleSerachCategory"
          @getFormData="getFormData"
        />
      </div>
      <div class="search_result">
        <SearchResults ref="searchList" v-on="$listeners" :dataSource="searchResults" />
      </div>
    </div>
    <div v-show="!isShowSearch" class="category_tree" ref="elTreeRef">
      <el-tree
        lazy
        ref="elTree"
        accordion
        highlight-current
        node-key="categoryUuid"
        :data="elTree.dataSource"
        :load="loadNodeByCategoryTree"
        :props="elTree.defaultProps"
        @node-click="handleClickCurrentNode"
      ></el-tree>
    </div>
  </div>
</template>
<script>
import { ApiRequest } from '@api/basePage';
import BasicForm from '@/components/BasicForm';
import SearchResults from './SearchResults';
import { isResponseSuccess } from '@/utils/bizUtils';
export default {
  components: {
    BasicForm,
    SearchResults
  },
  props: {
    isShowSearch: { // 是否显示表单查询，默认否
      type: Boolean,
      default: false
    },
  },
  data () {
    return {
      formItemList: [
        { prop: 'categoryName', label: '品类名称：', type: 'input' },
        { prop: 'categoryNo', label: '品类编码：', type: 'input' }
      ],
      formData: {
        categoryName: '',
        categoryNo: ''
      },
      searchResults: [], // 查询列表
      elTree: {
        dataSource: [],
        defaultProps: {
          children: 'children',
          label: 'cateNameAndNoStr',
          disabled: 'disabled',
          isLeaf: 'leaf'
        },
        END_LEVEL: '4',
      },
      apiObj: {
        getLevelOneCategoryList: { // 查询一级分类接口
          url: '/sysback/choose/category/getAllCateTypeLevelOneList',
          type: 'post'
        },
        getByParentUuid: { // 根据父分类查询子分类接口
          url: '/sysback/choose/category/getAllCateTypeListByParentUuid',
          type: 'post'
        },
        searchCateInfo: { // form表单查询接口
          url: '/sysback/category/productplatformcategory/searchCateInfo',
          type: 'post'
        }
      }
    }
  },
  mounted () {
    this.loadInitDataInMounted();
  },
  methods: {
    // 清空查询列表状态
    clearAllState () {
      this.searchResults = []; // 清空列表数据
      this.$refs.searchList.resetRadioValue(); // 清除勾选
    },
    // 加载初始数据在mounted时期
    loadInitDataInMounted () {
      this.getCategoryListByOneLevel();
    },
    // 加载品类树节点
    loadNodeByCategoryTree (node, resolve) {
      if (node.level === 0) { return false; }
      const { categoryUuid } = node.data;
      this.getCategoryListByParentUuid(categoryUuid).then(retData => {
        if (retData) {
          resolve(this.setNodeByAssemble(retData, categoryUuid));
        }
      });
    },
    // 设置分类节点 by 结构组装
    setNodeByAssemble (retData, categoryUuid) {
      const parentUuid = categoryUuid;
      return retData.map(item => {
        const { cateNameAndNoStr, categoryUuid, categoryPath, categoryName, categoryNo, levelNum, categoryTypeL1 } = item;
        return {
          categoryTypeL1,
          cateNameAndNoStr,
          categoryUuid,
          categoryPath,
          categoryName,
          categoryNo,
          levelNum,
          leaf: levelNum === this.elTree.END_LEVEL,
          parentUuid // 当前节点上一级uuid
        }
      });
    },
    // 当前点击节点
    handleClickCurrentNode (node) {
      this.clearAllState();
      this.$emit('getCategoryInfo', node);
    },
    // 品类查询
    handleSerachCategory () {
      this.getSearchResultByCategory();
    },
    // 获取确定的结果
    getResultByOk (data) {
      const { categoryUuid, categoryPath, categoryNo } = data;
      return { categoryUuid, categoryPath, categoryNo }
    },
    // 获取表单查询内容
    getFormData (data) {
      this.formData = data;
    },
    // 获取查询结果 by 品类查询
    getSearchResultByCategory () {
      this.postRequestCategoryList({
        ...this.apiObj.searchCateInfo,
        data: { ...this.formData }
      }).then(retData => {
        if (retData) {
          this.searchResults = retData.results;
        }
      });
    },
    // 获取一级分类集合
    getCategoryListByOneLevel () {
      this.postRequestCategoryList({
        ...this.apiObj.getLevelOneCategoryList
      }).then(retData => {
        if (retData) {
          this.elTree.dataSource = this.setNodeByAssemble(retData);
        }
      });
    },
    // 获取子分类集合 by 父级分类
    async getCategoryListByParentUuid (categoryUuid) {
      const retData = await this.postRequestCategoryList({
        ...this.apiObj.getByParentUuid,
        data: {
          parentUuid: categoryUuid,
          categoryType: '01'
        },
        isFormData: true
      });
      return retData;
    },
    // 获取分类集合post请求
    async postRequestCategoryList ({ url, type, data = {}, isFormData = false }) {
      const loadingInstance = this.$loading({ target: '.category_tree_wrap' });
      try {
        const res = await ApiRequest(url, type, data, isFormData);
        loadingInstance.close();
        if (isResponseSuccess(res)) {
          return res.retData;
        }
      } catch (err) {
        loadingInstance.close();
      }
    }
  }
}
</script>
<style lang="less" scoped>
.category_tree {
  height: 600px;
  padding: 10px;
  overflow: auto;
  border: 1px dashed #ccc;
}
.category_search {
  margin-top: 10px;
}
</style>
